<template>
  <div class="container">
    <el-card>
      <!-- -->
      <el-row style="display:flex; justify-self:space-around;" :gutter="10">
        <el-col :span="18" style="margin-top:10px; margin-left:20px; font-size:12px" >关键字
          <el-input v-model="searchVal" style="width:50%" placeholder="请输入内容"></el-input>
        </el-col>
        <el-col style="margin-top:15px"  :span="4">
          <el-button    @click="hdelInput" size="medium">清除</el-button>
          <el-button @click="hsearch(searchVal)" size="medium" type="primary">搜索</el-button>
        </el-col>
      </el-row>
      <el-row>
       <el-alert
          v-if="alertText !== ''"
          :title="alertText"
          type="info"
          class="alert"
          :closable="false"
          show-icon
        ></el-alert>
      </el-row>
      <el-row style="margin-top:30px">
        <el-table :data="list" style="width: 100%">
          <el-table-column class="shubiao" prop="id" label="编号" width="120"></el-table-column>
          <el-table-column label="题型" width="150">
            <template slot-scope="scope">
              <div v-if="scope.row.questionType == 1">单选</div>
              <div v-else-if="scope.row.questionType == 2">多选</div>
              <div v-else>简答</div>
            </template>
          </el-table-column>
          <el-table-column label="题目">
            <template slot-scope="scope">
             <div v-for="item in scope.row.questionIDs" :key="item.number" >
               <el-button @click="OdialogForm(item.id)" size="medium" type="text"> {{item.number}}</el-button>
             </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" width="230" label="录入时间"></el-table-column>
          <el-table-column prop="totalSeconds" width="120" label="答题时间(s)"></el-table-column>
          <el-table-column prop="accuracyRate" width="100" label="正确率(%)"></el-table-column>
          <el-table-column prop="userName" width="120" label="录入人"></el-table-column>
          <el-table-column width="120" label="操作">
            <template slot-scope="scope">
              <el-button
                @click.native="hdelList(scope.row.id)"
                type="danger"
                icon="el-icon-delete"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row>
        <div style="margin-top:20px; margin-right:50px; float:right" class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="changeCurrentPage"
            :current-page="requestParameters.page"
            :page-sizes="[10, 20]"
            :page-size="20"
            background
            layout=" prev, pager, next, sizes, jumper"
            :total="counts"
          ></el-pagination>
        </div>
      </el-row>
      <FengZhuang ref="refVisibleForm" :formList="formList"></FengZhuang>
    </el-card>
  </div>
</template>

<script>
import { randoms, removeRandoms, detail } from '@/api/hmmm/questions'
import FengZhuang from '../components/randoms'
export default {
  name: 'questions-randoms',
  components: {
    FengZhuang
  },
  data () {
    return {
      alertText: '', // 数据列表提示
      searchVal: '', // 输入框查询
      counts: 0, // 总数
      requestParameters: {
        page: 1,
        pagesize: 20,
        keyword: ''
      },
      // 接受后端返回数据
      list: [
        {
          id: '',
          addTime: '', // 时间
          accuracyRate: '', // 正确率
          totalSeconds: '', // 答题时间
          questionIDs: [{}], // 试题ID
          questionType: '', // 组题类型
          userName: '', // 录入人
          number: ''
        }
      ],
      // 题库列表数据
      formList: [
        {
          option: {},
          subjectID: '', // 学科
          difficulty: '', // 难度
          questionType: '', // 题型
          catalogID: '', // 目录
          answer: '', // 答案解析
          question: '', // 题干
          direction: '', // 方向
          id: '', // 编号
          tags: '', // 标签
          videoURL: '', // 参考答案
          remarks: '' // 题目备注
        }
      ]
    }
  },

  created () {
    this.getList()
  },
  watch: {
    searchVal: function (val) {
      this.requestParameters.keyword = val
      this.requestParameters.page = 1
      this.getList()
    }
  },
  methods: {
    // 弹出弹框
    async OdialogForm (id) {
      this.$refs.refVisibleForm.openVisible()
      const result = await detail({ id: id })
      this.number = result.data.number
      this.formList = result.data
    },
    // 清空输入框
    hdelInput () {
      this.searchVal = ''
    },
    // 查询操作
    hsearch (val) {
      this.requestParameters.keyword = val
      this.requestParameters.page = 1
      this.getList()
    },
    // 请求后端数据列表
    async getList (params) {
      const { data: res } = await randoms(this.requestParameters)
      this.list = res.items
      this.alertText = `数据共 ${res.counts} 条记录`
    },
    // 改变页码时触发
    changeCurrentPage (val) {
      this.requestParameters.page = val
      this.getList()
    },
    // 每页条数改变时触发
    handleSizeChange (val) {
      this.requestParameters.pagesize = val
      this.getList()
      this.requestParameters.page = 1
    },

    // 删除操作
    hdelList (id) {
      this.$confirm('此操作将永久删除该题组,是否继续', {
        type: 'warning'
      })
        .then(async () => {
          await removeRandoms({ id: id })
            .then((res) => {
              this.$message.success('操作成功')
              this.getList()
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch(() => {})
    }
    // 获取题库列表
  }
}
</script>

<style lang='scss' scoped>
.shubiao {
  color: red;
}
</style>
